import React, { useCallback, useEffect } from 'react'
import { Layout } from 'antd'
import HomeMenu from '@/components/HomeMenu'
import { Outlet } from 'react-router-dom'
import { useSnapshot } from 'valtio'
import { state } from '@/stores'
import BackLogin from '@/components/BackLogin'
import { UserFz } from '@/stores/UserFz'
const { Header, Content, Sider } = Layout

const App: React.FC = () => {
    const store = useSnapshot(state)
    const userStore = useSnapshot(UserFz)
    useEffect(() => {
        const token = localStorage.getItem('user')
        if (token){
            userStore.onMenu()
        }
    },[])
    return (
        <Layout className="h-svh">
            <Header style={{ display: 'flex', alignItems: 'center' }}>
                <div className="w-full flex justify-between">
                    <div className="text-xl text-white">智慧云SaaS餐饮平台</div>
                    <div className="text-xl text-white">
                      <BackLogin />
                    </div>
                </div>
            </Header>
            <Layout>
                <Sider width={200} className="overflow-auto">
                    <HomeMenu />
                </Sider>
                <Layout>
                    <Content className="position-relative">
                        <div className="w-full shadow h-1/15 flex pl-10 items-center">
                            <div className="w-1 h-6 bg-blue"></div>
                            <div className="text-xl ml-1 text-gray-500">
                                {store.current_page.label}
                            </div>
                        </div>
                        <div className="w-full h-14/15 overflow-auto ">
                            <Outlet />
                        </div>
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    )
}

export default App
